<template>
  <div>
    <img class="webp" src="../assets/imgs/webp.png" />
    <div class="flex">
      <header>
        <img src="../assets/imgs/logo.png" alt="" style="height: 33%;width:  33%"/>
      </header>
      <div class="card" :style="errInfo == true ? 'padding: 40px 20px;' : ''">
        <div
          class="flex1"
          v-if="errInfo == false && showList == false ? true : false"
        >
          <div class="box">
            <img class="box_img" src="../assets/imgs/phone.png" />
            <van-field
              :value="phone"
              @input="inputChange"
              disabled
              size="22px"
              type="tel"
              placeholder='点击"切换手机号"修正'
            />
          </div>
          <div class="box" v-if="showCode">
            <img class="box_img" src="../assets/imgs/code.png" />
            <van-field
              v-model="verificationCode"
              type="digit"
              placeholder="请输入验证码"
              maxlength="6"
            />
          </div>
          <van-checkbox
            class="checkbox"
            v-model="isCheckbox"
            shape="square"
            icon-size="16px"
            ><div class="checkbox_text">
              同意并授权本系统通过运营商查询本人在疫情期间14天内到访地信息。您可以阅读<span class="del" @click="secret">《本系统隐私政策》</span>，如您同意，请勾选后点击“确定”。
            </div></van-checkbox
          >

          <button class="ok" @click="ok">确 定</button>
          <button class="edit" @click="toEdit">切换手机号</button>
        </div>
<!--        <div class="msg">-->
<!--        </div>-->
        <div v-if="errInfo">
          <div v-if="errInfoTitle" class="errInfo">
            <img class="errImg" src="../assets/imgs/no.png" />
            <span>您未申请浙江省健康码</span>
            <div>请前往<a>支付宝</a>或者<a>浙里办</a>申领浙江省健康码</div>
            <button
              class="errok"
              @click="okErrBack"
              style="width: 100% !important"
            >
              返 回
            </button>
          </div>
          <div v-if="errInfoTitle == false" class="errInfo">
            <div>未查询到健康码，请补充身份证号码</div>
            <div class="box" style="padding: 10px 0">
              <img class="box_img" src="../assets/imgs/personNumber.png" />

              <van-field
                v-model="personNumberNew"
                placeholder="请输入身份证号码"
              />
            </div>
            <div v-if="healthCodeButton == false" class="phoneText">
              请输入{{ phone }}的手机号验证码
            </div>
            <div
              v-if="healthCodeButton == false"
              class="box"
              style="padding: 10px 0"
            >
              <img class="box_img" src="../assets/imgs/code.png" />

              <van-field
                v-model="verificationCode"
                placeholder="请输入验证码"
                type="digit"
                maxlength="6"
              />
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
              "
            >
              <button class="errback" @click="okErrBack">返 回</button>
              <button
                v-if="healthCodeButton"
                class="errok"
                @click="okHealthCode"
              >
                健康码核验
              </button>
              <button
                v-if="healthCodeButton == false"
                class="errok"
                @click="okDiCode"
              >
                双码核验
              </button>
            </div>
          </div>
        </div>
        <div class="msg" v-if="showList">
          <div class="list_title">请选择您本人的身份信息</div>
          <van-radio-group v-model="radio" @change="listChange">
            <van-radio
              v-for="(item, index) in list"
              :key="index"
              class="box"
              :name="item"
              icon-size="24px"
            >
              <span style="margin: 10px">{{ item.xm | nameChange }}</span>
              {{ item.sfzh | personNumberChange }}</van-radio
            >
          </van-radio-group>

          <div class="flex2">
            <button class="retun" @click="okRet" style="width: 45% !important">
              返 回
            </button>
            <button
              class="ok"
              @click="okInfo"
              style="width: 45% !important; margin-top: 0"
            >
              确 定
            </button>
          </div>
          <div class="errMsg">
            注：若没有您本人的身份信息，请联系医院服务人员
          </div>
        </div>
      </div>
    </div>
<div
   v-show="isShow"
   show-cancel-button

>

  <div class="myalert">
   <span class="twoem">本程序的生成页面结果仅限于进出医院的通行凭证，未经宁波市卫健委书面授权，任何机构或个人不得以任何形式复制、转发或公开传播本报告的全部或部分内容，不得将报告内容作为诉讼、仲裁、传媒所引用之证明或依据，不得用于未经允许的其他用途。其它相关信息详见浙里办系统内用户须知及相关声明性说明。健康码只做码色展示，数据来自于浙江省大数据局，如您有疑问，请打开支付宝浙江健康码专区进行申述行程码来自于工信部信通院，如您有疑问，移动客户打10086；联通客户打10010，电信用户打10000核酸信息和疫苗信息仅供参考，如显示与您实际不符，核酸咨询原核酸采集单位、疫苗咨询原接种单位。</span>
   <van-button class="exit" name="close" type="primary" @click="secret">返回</van-button>

  </div>
</div>
<!-- 21 -->
    <div class="logoBox">
      <div class="innerlog">
        <img src="../assets/imgs/bottom.png" alt=""  style="height: 55%;width: 55%;"/>
        <div style="color: #999999">
          <span>服务咨询热线：</span>
          <span style="color: #2581FC">0574-55001200</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "axios"
import Vue from "vue";
import { Popup } from "vant";
import { Toast } from "vant";
import { Field } from "vant";
import { Button } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
import { RadioGroup, Radio } from "vant";
import { NumberKeyboard } from "vant";
import { Cell, CellGroup } from "vant";
import { Dialog } from "vant";
import { Notify } from "vant";
sessionStorage.setItem("is", true);
Vue.use(Notify);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(NumberKeyboard);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Button);
Vue.use(Field);
Vue.use(Toast);
Vue.use(Popup);
// Vue.use(Dialog);
import "vant/lib/index.css";
import {Decrypt} from "@/utils/AESUtils";
import md5 from 'crypto-js/md5'
// import {aplus_queue} from "../assets/js/zwjsbridge"

let changeStr = function (str, index, changeStr) {
  return (
    str.substring(0, index) +
    changeStr +
    str.substring(index + changeStr.length)
  );
};
export default {
  data() {
    return {
      radio: "",
      isItinerary: "",
      isHealthCode: false,
      isCheckbox: true,
      errInfo: false,
      showCode: false,
      showList: false,
      disabled: false,
      errInfoTitle: false,
      healthCodeButton: true,
      isShow:false,
      list: [],
      personNumber: "",
      personNumberNew: "",
      openId: "",
      code: "",
      errText: "确定",
      name: "",
      phone: "",
      verificationCode: "",
    };
  },

  created() {
    let reg = new RegExp("(^|&)" + "accessToken" + "=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    console.log(window.location.search);
    console.log(window.location.search.substr(1));
    if (r != null) {
      r = unescape(r[2]);
    }
      this.getMembersInfo(r);
    // 提交时没有这之间的代码
    // let is = sessionStorage.getItem("is");
    // if (r) {
    //   if (is == "true") {
    //     this.getMembersInfo(r);
    //   }
    // } else {
    //   this.phone = localStorage.getItem("phone");
    // }
    // 提交时没有这之间的代码
    // this.phone='15067450453';
    // this.name='胡雯艳';
    // this.personNumber='330203198908290048';
    // this.phone='';
    // this.name='';
    // this.personNumber='';
    /* this.phone='13566043935';
    this.name='贾潇慧';
    this.personNumber='411424200507114223'; */
/*     this.name="李亚星";
    this.phone='18358448678';
    this.personNumber='370322198610150239'; */
  /* this.name="吴银宁";
    this.phone='18058584343';
    this.personNumber='330682199408309023'; */
    /* this.phone='17513156525';
    this.name="王东升";
    this.personNumber='411024199806026218'; */
    /* this.name="徐定沛";
    this.personNumber='330227197611160791';
    this.phone='13777976672'; */
/*  this.name="吴银宁";
       this.personNumber="330682199408309023";
    this.phone="18058584343"; */
    /* this.phone='15821426312';
    this.name="张付桂";
    this.personNumber='41272319870905643X'; */
    /* this.phone='15821426312';
    this.name="张付桂";
    this.personNumber='41272319870905643X';  */
    /* this.phone='320924198912204438';
    this.name="施乃军";
    this.personNumber='320924198912204438'; */
/*     this.phone='16696120606';
    this.name="张钊源";
    this.personNumber='612323199712202936'; */
  },

  beforeRouteLeave(to, from, next) {
    // 路由导航钩子，此时还不能获取组件实例 `this`，所以无法在data中定义变量（利用vm除外）
    // 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
    // 所以，利用路由元信息中的meta字段设置变量，方便在各个位置获取。这就是为什么在meta中定义isBack
    // 参考 https://router.vuejs.org/zh-cn/advanced/meta.html
    if (from.name == "healthCode") {
      from.meta.keepAlive = true;
      //判断是从哪个路由过来的，
      //如果是page2过来的，表明当前页面不需要刷新获取新数据，直接用之前缓存的数据即可
    }
    next();
  },
  filters: {
    nameChange(e) {
      if (e) {
        if (e.length > 3) {
          e = changeStr(e, 0, "*");
          e = changeStr(e, 1, "*");
        } else {
          e = changeStr(e, 0, "*");
        }
      } else {
        e = "**";
      }
      return e;
    },
    personNumberChange(e) {
      // 身份证
      if (e) {
        if (e.length == 18) {
          e = e.substring(0, 6) + "********" + e.substring(14, 18);
        } else if (e.length == 15) {
          e = e.substring(0, 4) + "********" + e.substring(11, 15);
        } else if (e.length >= 4 && e.length != 15 && e.length != 18) {
          e = e.substring(0, 4) + "****";
        }
      } else {
        e = "*****************";
      }
      return e;
    },
  },
  methods: {
    // 切换弹出框
    secret(){
      this.isShow=!this.isShow;
    },
    // 获取用户信息
    async getMembersInfo(r) {
      /* Toast.loading({
        message: "加载中...",
        forbidClick: true,
        textSize:18,
        size:30,
      }); */
      Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">加载中...</span></div>`,
          type:"html",
          forbidClick: true,
        });
      console.log(r);
      const res = await this.$http.get("/h5Page/getMembersInfo", {
        params: {
          accessToken: r,
        },
      });
      Toast.clear();
      sessionStorage.setItem("is", false);
      console.log(res.data);
      if (res.data.success == true) {
        this.name = res.data.data.name;
        this.openId = res.data.data.openId;
        this.phone = res.data.data.phone;
        this.personNumber = res.data.data.cardNum;
        this.isHealthCodeAndItineraryInfo("e");
      }
    },
    // 根据身份证号判断是否有健康码
    async getHealthCodeByPersonNumberRest() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const res = await this.$http.get(
        "/h5Page/getHealthCodeByPersonNumberRest",
        {
          params: {
            phone: this.phone,
            personNumber:
              this.personNumberNew == ""
                ? this.personNumber
                : this.personNumberNew,
          },
        }
      );
      Toast.clear();
      if (res.data.success == true) {
        let resData = res.data;
        if (resData.success == true) {
          if (resData.data == true) {
            this.getVerificationCodeNew();
            this.showCode = true;
            this.isHealthCode = true;
          } else {
            this.errInfo = true;
            this.errInfoTitle = true;
            this.errText = "返回";
          }
        }
      }
    },
    // 是否有申领过健康码和登记行程
    async isHealthCodeAndItineraryInfo(e) {
      if(!this.name){
        /* Toast.loading({
          message: '无姓名信息，请用浙里办扫码',
          forbidClick: true,
        }); */
         Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">无姓名信息，请用浙里办扫码。</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return null;
      }
      if(!this.phone){
          Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">无手机号信息，请用浙里办扫码。</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return null;
      }
      if(!this.personNumber){
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">无身份证信息，请用浙里办扫码。</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return null;
      }
      // var Base64 = require('js-base64').Base64;
      Toast.loading({
          message: `<div style="height:25px;"><span style="font-size:16px;line-height:25px;">加载中...</span></div>`,
          type:"html",
          forbidClick: true,
        });
      const params = {
        phone: this.phone,
        personNumber: this.personNumber,
        name: this.name
      };
      
    
      let url = process.env.VUE_APP_BASEURL + "/h5Page/isHealthCodeAndItineraryInfo?phone="+this.phone+"&personNumber="+this.personNumber+"&name="+this.name;
      let timestamp = new Date().getTime();
      let sign = this.getSign(url,timestamp);
      let md = md5(sign)+"";
      const res = await this.$http.get("/h5Page/isHealthCodeAndItineraryInfo", {
        params: params,
        headers: {
              'UHCC_SIGN': md.toUpperCase(),
              'UHCC_TIMESTAMP': timestamp },
      });
      Toast.clear();
      if (res.data.success == true) {
        let response = Decrypt(res.data.data);
        let result = JSON.parse(response);
          this.isHealthCode = result.isHealthCode;
          this.isItinerary = result.isItinerary;
          let list = [];
          for (const key in result.healthCodeData) {
            list.push(result.healthCodeData[key]);
          }
          this.list = list;
          if (list.length > 1) {
            if (this.isItinerary == true) {
              this.showList = true;
            } else {
              this.getVerificationCodeNew();
            }
          } else if (list.length == 1) {
            this.personNumber = list[0].sfzh;
            if (this.isItinerary == true) {
              this.getItineraryCodeNew();
            } else {
              if (e != "e") {
                if (result.isHealthCode == false) {
                  this.getHealthCodeByPersonNumberRest();
                } else {
                  this.getVerificationCodeNew();
                }
              }
            }
          } else {
            if (result.isHealthCode == false) {
              this.errInfo = true;
            }
          }
      }
    },

    getSign(urll,timestamp) {
      const body = undefined;
      const url = new URL(
          urll
      )
      const key = '083b83b0ed1c4d73'

      const signContent = md5(JSON.stringify(body))
      const { search, pathname } = url
      const array = search
          .substring(1)
          .split('&')
          .sort((a, b) => {
            const [k1, v1] = a.split('=')
            const [k2, v2] = b.split('=')
            if (k1.toLowerCase() < k2.toLowerCase()) {
              return -1
            }
            if (k1.toLowerCase() > k2.toLowerCase()) {
              return 1
            }
            return 0
          })
      return `&${array.join('&')}&${pathname}&${timestamp}&${key}`;

    },
    // 获取手机验证码
    async getVerificationCodeNew() {
      Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">加载中...</span></div>`,
          type:"html",
          forbidClick: true,
        });
      const res = await this.$http.get("/h5Page/getVerificationCodeNew", {
        params: {
          phone: this.phone,
        },
      });
      Toast.clear();
      if (res.data.success == true) {
        // Toast(res.data.data);
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">${res.data.data}</span></div>`,
          type:"html",
          forbidClick: true,
        });
        if (this.isHealthCode == true && this.list.length > 0) {
          this.showCode = true;
        } else {
          this.errInfo = true;
          this.healthCodeButton = false;
        }
      } else {
        if (res.data.message == "您的验证码仍在有效期内") {
          if (this.isHealthCode == true && this.list.length > 0) {
            this.showCode = true;
          } else {
            this.healthCodeButton = false;
            this.errInfo = true;
          }
        }
        // Toast(res.data.message);
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">${res.data.message}</span></div>`,
          type:"html",
          forbidClick: true,
        });
      }
    },

    // 获取行程码
    async getItineraryCodeNew() {
      if (this.isItinerary == false && this.verificationCode == "") {
        // Toast("请输入验证码");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请输入验证码</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
      /* Toast.loading({
        message: "加载中...",
        forbidClick: true,
      }); */
      Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">加载中...</span></div>`,
          type:"html",
          forbidClick: true,
        });
      const res = await this.$http.get("/h5Page/getItineraryCodeNew", {
        params: {
          isItinerary: this.isItinerary,
          openId: this.openId,
          personNumber: this.personNumberNew
            ? this.personNumberNew
            : this.personNumber,
          phone: this.phone,
          verificationCode: this.verificationCode,
        },
      });
      Toast.clear();
      if (res.data.success == true) {
        if (res.data.data && res.data.success == true) {
          let data = encodeURIComponent(JSON.stringify(res.data.data));
          localStorage.setItem("phone", this.phone);
          localStorage.setItem(this.phone, res.data.data.phoneToken);
          sessionStorage.setItem("HealthCode", data);
          this.$router.push({
            path: "/HealthCode",
          });
        } else {
          if (res.data.message == "验证码错误") {
            // Toast(res.data.message);
            Toast.loading({
              message: `<div><span style="font-size:16px;line-height:25px;">${res.data.message}</span></div>`,
              type:"html",
              forbidClick: true,
            });
            if (this.isHealthCode == false) {
              this.verificationCode = "";
              return;
            }
          } else if (res.data.message == "健康码数据不存在") {
            // Toast(res.data.message);
            Toast.loading({
              message: `<div><span style="font-size:16px;line-height:25px;">${res.data.message}</span></div>`,
              type:"html",
              forbidClick: true,
            });
            this.phone = "";
            this.errInfoTitle = true;
            this.errText = "返回";
            return;
          } else if (res.code==600){
            // Toast(res.message);
            Toast.loading({
              message: `<div><span style="font-size:16px;line-height:25px;">${res.message}</span></div>`,
              type:"html",
              forbidClick: true,
            });
            return;
          }else {
            // Toast("核验失败,请重试");
            Toast.loading({
              message: `<div><span style="font-size:16px;line-height:25px;">核验失败,请重试</span></div>`,
              type:"html",
              forbidClick: true,
            });
            this.phone = "";
            this.disabled = false;
          }
        }
        this.showCode = false;
        this.isCheckbox = true;
        this.errInfo = false;
        this.isItinerary = "";
        this.verificationCode = "";
        this.list = [];
        this.showList = false;
        this.personNumber = "";
        this.personNumberNew = "";
      }
    },
    // 健康码核验
    okHealthCode() {
      if (this.personNumberNew == "") {
        // Toast("请输入身份证");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请输入身份证</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
      this.getHealthCodeByPersonNumberRest();
    },
    // 双码核验
    okDiCode() {
      if (this.personNumberNew == "") {
        // Toast("请输入身份证");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请输入身份证</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
      if (this.verificationCode == "") {
        // Toast("请输入验证码");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请输入验证码</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
      this.getItineraryCodeNew();
    },
    ok() {
      if (this.isCheckbox == false) {
        // Toast("请确认授权行程信息");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请确认授权行程信息</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
     (function(w, d, s, q, i) {
        w[q] = w[q] || [];
        let f = d.getElementsByTagName(s)[0],
          j = d.createElement(s);
        j.async = true;
        j.id = "beacon-aplus";
        j.src = "https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085";
        f.parentNode.insertBefore(j, f);
      })(window, document, "script", "aplus_queue");
      setTimeout(()=>{
          aplus_queue.push({
          action: "aplus.setMetaInfo",
          arguments: ["aplus-waiting", "MAN"]
        });
        aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['DEBUG', false] });
        aplus_queue.push({
          action: "aplus.setMetaInfo",
          arguments: ["aplus-rhost-v", "alog.zjzwfw.gov.cn"]
        });
        aplus_queue.push({
          action: "aplus.setMetaInfo",
          arguments: ["aplus-rhost-g", "alog.zjzwfw.gov.cn"]
        });
        aplus_queue.push({
          action: "aplus.setMetaInfo",
          arguments: ["appId", "60506758"]
        });
      },1000)
      if(!this.phone){
        // Toast("未获取到手机号信息，请用浙里办扫码。");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">未获取到手机号信息，请用浙里办扫码。</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
      console.log(this.phone);
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        // Toast("请填写正确的手机号");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请填写正确的手机号。</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }
      if (this.showCode == true) {
        if (this.list.length > 1) {
          this.showList = true;
        } else {
        this.getItineraryCodeNew();
        }
      } else {
        this.isHealthCodeAndItineraryInfo();
      }
    },
    aplus(){
      
    },
    toEdit() {
      window.location.href = 'https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001401530/reserved/index.html?skipUrl=editPhone'
    },
    okInfo() {
      if (this.radio == "") {
        // Toast("请先选择本人身份证");
        Toast.loading({
          message: `<div><span style="font-size:16px;line-height:25px;">请先选择本人身份证。</span></div>`,
          type:"html",
          forbidClick: true,
        });
        return;
      }

      let xm = this.name;
      let sfzh = this.personNumber;
      // 身份证
      if (sfzh) {
        if (sfzh.length == 18) {
          sfzh = sfzh.substring(0, 6) + "********" + sfzh.substring(14, 18);
        } else if (sfzh.length == 15) {
          sfzh = sfzh.substring(0, 4) + "********" + sfzh.substring(11, 15);
        } else {
          let num = sfzh.length - 4;
          let str = "";
          for (let index = 0; index < num; index++) {
            str += "*";
          }
          sfzh = sfzh.substring(0, 4) + str;
        }
      }
      // 姓名
      if (xm) {
        if (xm.length > 3) {
          xm = changeStr(xm, 0, "*");
          xm = changeStr(xm, 1, "*");
        } else {
          xm = changeStr(xm, 0, "*");
        }
      }
      if (xm == null) {
        xm = "无";
      }
      Dialog.confirm({
        title: "提示",
        message: `确定[${xm}|${sfzh}]是您本人信息?`,
      })
        .then(() => {
          this.getItineraryCodeNew();
        })
        .catch(() => {
          // on cancel
        });
      
    },
    listChange(e) {
      this.personNumber = e.sfzh;
      this.name = e.xm;
    },
    // 返回
    okRet() {
      this.showList = false;
    },
    // 返回
    back() {
      this.isCheckbox = true;
      this.verificationCode = "";
      this.errInfo = false;
      this.isItinerary = "";
      this.showCode = false;
      this.errInfoTitle = false;
      this.errText = "确定";
      this.personNumber = "";
      this.personNumberNew = "";
    },
    // 返回
    okErrBack() {
      this.isCheckbox = true;
      this.phone = "";
      this.verificationCode = "";
      this.errInfo = false;
      this.isItinerary = "";
      this.showCode = false;
      this.errInfoTitle = false;
      this.errText = "确定";
      this.personNumber = "";
      this.personNumberNew = "";
    },
    inputChange(e) {
      if (e != this.phone) {
        this.phone = e;
        this.isCheckbox = true;
        this.verificationCode = "";
        this.errInfo = false;
        this.isItinerary = "";
        this.showCode = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
button {
  border: 0;
}
.webp {
  width: 100vw;
  height: 450px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -99;
}
.del{
  text-decoration: underline;
  color: #1979fb;
}

.myalert{
  line-height: 50px;
  position: absolute;
  top: 50%;

  text-indent: 2em;
  width: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px #ccc;
    padding: 20px ;
    font-family: "微软雅黑";
    .exit{
      width: 50vw;
      margin: 30px auto;
      height: 50px;
      border-radius: 25px;
      display: block;
      background: #1c7cfb;
    }
}

.flex {
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.flex2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.van-cell::after {
  border: 0 !important;
}
header {
  color: #ffffff;
  font-size: 50px;
  text-align: center;
  margin-top: 50px;
  img {
    width: 200px;
    height: 220px;
  }
}
.card {
  margin-top: 50px;
  width: 90%;
  background-color: white;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 2px 2px 10px #888;
  padding: 40px 30px;
  position: relative;
}

.verify {
  width: 150px !important;

  font-size: 22px;
  padding: 0;
  text-align: center;
  background: transparent;
  color: #1979fb;
  box-sizing: border-box;
  margin-left: 10px !important;
  margin-right: 0 !important;
  border-radius: 0;
  border: 0;
}
.i {
  height: 100%;
  border-left: 1px solid #b5b5b5;
}
.phoneText {
  width: 100%;
  text-align: left;
  font-size: 22px;
}
.ok {
  width: 100% !important;
  height: 60px;
  margin-top: 70px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: #1c7cfb;
  color: white;
  font-size: 25px;
  font-weight: bold;
  border-radius: 30px;
  border: 0;
}
.edit {
  width: 100% !important;
  height: 60px;
  margin-top: 10px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: white;
  color: #1c7cfb;
  font-size: 25px;
  font-weight: bold;
  border-radius: 30px;
  border:1px solid #1c7cfb;

}

.okHealthCode {
  width: 100% !important;
  height: 60px;
  margin-top: 25px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: #1c7cfb;
  color: white;
  font-size: 25px;
  font-weight: bold;
  border-radius: 25px;
}
.errok {
  width: 40% !important;
  height: 60px;
  margin-top: 25px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: #1c7cfb;
  color: white;
  font-size: 25px;
  font-weight: bold;
  border-radius: 25px;
}
.errback {
  width: 40% !important;
  height: 60px;
  margin-top: 25px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: #ccc;
  color: white;
  font-size: 25px;
  font-weight: bold;
  border-radius: 25px;
}
.retun {
  height: 60px;
  text-align: center;
  line-height: 60px;
  padding: 0;
  background: #cccccc;
  color: white;
  font-size: 25px;
  font-weight: bold;
  border-radius: 25px;
}
.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 20px 10px;
  border-bottom: 1px solid #b5b5b5;
  margin-bottom: 20px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-bottom: 1px solid #b5b5b5;
  box-sizing: border-box;
  font-size: 23px;
}

.box_img {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.box_input {
  width: 150px;
  font-size: 22px;
  text-align: left;
  height: 15px;
}

.yuan {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}

.checkbox {
  font-size: 20px;
  line-height: 20px !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .checkbox_text {
    color: #666666;
    line-height: 1rem;
  }
}

.check {
  width: 20px;
  height: 20px;
  margin-right: 11px;
}

.logo {
  width: 30px;
  height: 30px;
  margin-right: 8px;
}

.logoBox {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 20px;
  color: #1b7afb;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -9;
}
.innerlog{
  margin: 0 auto;
  text-align: center;
  width: 80%;
}

.errInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.errImg {
  width: 100px;
  height: 100px;
}

.errInfo a {
  color: #1979fb;
}

.errInfo span {
  margin-top: 25px;
  margin-bottom: 17px;
  color: #999999;
}

.msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .van-radio {
    width: 400px;
  }
}

.errMsg {
  width: 100%;
  color: #666666;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}

.list_title {
  font-size: 25px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  padding: 10px;
}

.back {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: center;
  background: #1c7cfb;
  color: white;
  border-radius: 8px 0 10px 0;
  padding: 5px 10px;
  font-size: 12px;
}
.van-cell {
  font-size: 24px !important;
}
.van-toast ::v-deep {
  padding: 20px !important;
}
</style>
